{% extends 'base.html' %}
{% load staticfiles %}

{% block main %} 
<div class="two wide column" style="background: #383d4b; height: 100%;">
    {% include 'taskdo/sidebar.html' %}
</div>

<div class="fourteen wide column" style="overflow: auto;">
    <!-- 搜索框 -->
    <div class="ui mini compact menu" style="width: 100%; height: 50px;">
        <div class="right menu">
            <div class="item">
                <form method="get" action="{% url 'taskdo:search' %}">
                    <div class="ui icon input">
                        <input type="text" placeholder="关键字" name="text">
                        <i class="search icon"></i>
                    </div>
                    <button class="ui icon button" type="submit" style="display: none"></button>
                </form>
            </div>
        </div>
    </div>

    <!-- 节点信息 -->
    <div style="overflow: auto; padding: 0.5% 0px; height: 87%;">
        <table id="tableres" class="ui small compact single line striped sortable celled orange table">
            <thead>
              <tr>
                <th>
                  <div class="ui mini basic icon buttons">
                    <!-- <button class="ui button" onclick="opcheckboxed('checkbox', 'checkall')"><i class="checkmark box icon"></i></button> -->
                    <!-- <button onclick="opcheckboxed('checkbox', 'uncheckall')">取消全选</button> -->
                    <button class="ui button" onclick="opcheckboxed('checkbox', 'reversecheck')"><i class="checkmark icon"></i></button>
                  </div>
                </th>
                <th>编号</th>
                <th style="display: none">ID</th>
                <th>任务名称</th>
                <th>用户</th>
                <th>用户IP</th>
                <th>执行动作</th>
                <th>执行状态</th>
                <th>执行时间</th>
                <th>结束时间</th>
                <th>执行模块</th>
                <th>执行命令</th>
                <th>执行结果</th>
              </tr>
            </thead>
            <tbody class="tredit">
              {% for line in page_data %}
                <tr>
                  <td>
                    <input type="checkbox" name="checkbox" value="{{ line.id }}">
                    <label></label>
                  </td>
                  <td style="display: none">{{ line.id }}</td>
                  <td>{{forloop.counter}}</td>
                  <td>{{ line.identifier }}</td>
                  <td>{{ line.action_user }}</td>
                  <td>{{ line.action_ip }}</td>
                  <td>{{ line.exec_type }}</td>

                  {% if line.exec_state == 'ok' %}
                    <td><label style="color: green;">{{ line.exec_state }}</label></td>
                  {% elif line.exec_state == 'failed' %}
                    <td><label style="color: red;">{{ line.exec_state }}</label></td>
                  {% elif line.exec_state == 'unreachable' %}
                    <td><label style="color: grey;">{{ line.exec_state }}</label></td>
                  {% elif line.exec_state == 'skipped' %}
                    <td><label style="color: yellow;">{{ line.exec_state }}</label></td>
                  {% else %}
                    <td><label style="color: blue;">{{ line.exec_state }}</label></td>
                  {% endif %}

                  <td>{{ line.exec_starttime }}</td>
                  <td>{{ line.exec_endtime }}</td>
                  <td>{{ line.exec_module }}</td>
                  <td>{{ line.exec_bash }}</td>
                  <td>{{ line.exec_result | truncatechars:80 }}</td>
              </tr>
            {% endfor %}
            </tbody>
        </table>
    </div>

    <!-- 分页 -->
<!--     ListView 传递了以下和分页有关的模板变量供我们在模板中使用：
        paginator ，即 Paginator 的实例。
        page_obj ，当前请求页面分页对象。
        is_paginated，是否已分页。只有当分页后页面超过两页时才算已分页。
        object_list，请求页面的对象列表，和 post_list 等价。所以在模板中循环文章列表时可以选 post_list ，也可以选 object_list。 -->
    <div class="ui compact menu" style="width: 100%; padding: 5px; height: 50px;">
        <div class="right menu">
            {% if is_paginated %}
                <a class="icon item" href="?page=1"">
                  <i class="step backward icon"></i>
                </a>
                <!-- 如果当前页还有上一页，显示一个上一页的按钮 -->
                {% if page_obj.has_previous %}
                <a class="item" href="?page={{ page_obj.previous_page_number }}"><i class="left chevron icon"></i></a>
                {% endif %}
                <!-- 显示当前页面信息 -->
                <div class="item">第 {{ page_obj.number }} 页 / 共 {{ paginator.num_pages }} 页</div>
                <!-- 如果当前页还有下一页，显示一个下一页的按钮 -->
                {% if page_obj.has_next %}
                <a class="item" href="?page={{ page_obj.next_page_number }}"><i class="right chevron icon"></i></a>
                {% endif %}
                <a class="icon item" href="?page={{ paginator.num_pages }}">
                  <i class="step forward icon"></i>
                </a>
            {% endif %}
        </div>
    </div>
</div>
{% endblock main %}


{% block custom_script %}

<!-- 表格双击操作 -->
<script>
$(function () {
    var trRow=document.getElementsByClassName("tredit");
    var tr=$(trRow).find("tr");
    tr.dblclick(function () {
        //所要跳转页面url
        var url ="exec_result?id=" + this.cells[1].childNodes[0].textContent; //获取此行第二个单元格的值，childNodes[0]指此单元格子节点的第一个子节点
        window.location.href=url;
    });
});
</script>

{% endblock custom_script %}